<template>
  <div class="child_list">
    <div class="child_list_search">
      <div class="search_box">
        <el-select
          style="width: 145px;"
          v-model="featchData.clientType"
          placeholder="请选择"
        >
          <el-option
            v-for="item in typeOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <el-select
          style="width: 230px;"
          v-model="featchData.gameGroupId"
          placeholder="请选择游戏分组"
          filterable
        >
          <el-option
            v-for="item in groupsOption"
            :key="item.id"
            :label="item.name +'('+ item.id +')'"
            :value="item.id"
          >
            <span style="float: left">{{ item.label +'('+ item.id +')' }}</span>
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <el-select
          style="width: 170px;"
          v-model="featchData.statusType"
          placeholder="请选择"
        >
          <el-option
            v-for="item in statusOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <el-date-picker
          v-model="featchData.dateTime"
          style="width: 290px;"
          type="daterange"
          clearable
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="search_box">
        <el-select
          style="width: 170px;"
          v-model="featchData.hasThirdApi"
          placeholder="请选择"
        >
          <el-option
            v-for="item in apiOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <el-input
          style="width: 200px;"
          v-model="featchData.query"
          placeholder="推广商/推广地址/母包标识"
        ></el-input>
      </div>
      <div class="search_box">
        <el-button class="seach_btn" type="primary" @click="searchData" style="height: 36px;"
          >搜索</el-button
        >
        <span @click="resetData" class="reset_btn">重置</span>
      </div>
      <div
       style="margin-bottom: 16px;"
        v-if="roleType !== '2'"
      >
        <el-button @click="addChild" style="height: 36px;" type="primary">
          创建子包
        </el-button>
      </div>
    </div>
    <div class="child_list_table">
      <page-table-new
        :tableData="tableData"
        :total="total"
        :featchData="featchData"
        :defaultSort="{ prop: 'modifyTime', order: 'descending' }"
        :tableColumns="tableColumns"
        @pageChange="handlePageChange"
        @sortChange="handleSortChange"
      >
        <template #id="scope">
          <div
            @click="previewItem(scope.row)"
            style="color: #0266CC; cursor: pointer;"
          >
            {{ scope.row.id }}
          </div>
        </template>
        <!-- 游戏分组 -->
        <template #gamegroupid="scope">
          {{ scope.row.gamegroupname }}({{scope.row.gamegroupid}})
        </template>
        <!-- 推广商 -->
        <template #username="scope">
          <span v-if="scope.row.username">{{ scope.row.username }}</span>
          <span v-else>-</span>
          <span>({{ scope.row.assistantagencyid }})啊手工费尬尴</span>
        </template>
        <template #officialurl="scope">
          <div v-if="scope.row.packstatus === 2 && scope.row.plisturl">
            <span class="table_btn" @click="download(scope.row.plisturl)">下载</span>
            <span class="table_btn" @click="copyDown(scope.row.plisturl)">复制</span>
          </div>
          <div v-else-if="scope.row.packstatus === 2 && scope.row.officialurl">
            <span class="table_btn" @click="download(scope.row.officialurl)">下载</span>
            <span class="table_btn" @click="copyDown(scope.row.officialurl)">复制</span>
          </div>
          <div v-else>
            -
          </div>
        </template>
        <template #h5url="scope">
          <div v-if="scope.row.h5url">
            <span class="table_btn" @click="copyDown(scope.row.h5url)"
              >复制</span
            >
          </div>
          <div v-else>
            -
          </div>
        </template>
        <template #qrcode="scope">
          <div v-if="scope.row.packstatus === 2 && scope.row.qrcodeaddress">
            <el-popover
              popper-class="qr_popover"
              placement="right-start"
              width="200"
              trigger="hover"
            >
              <img :src="scope.row.qrcodeaddress" alt="下载地址" />
              <i
                @click="openImg(scope.row.qrcodeaddress)"
                slot="reference"
                class="iconfont icon-erweima"
              ></i>
            </el-popover>
          </div>
          <div v-else>
            -
          </div>
        </template>
        <template #clienttype="scope">
          <div>
            {{
              scope.row.clienttype === 0
                ? "PC"
                : scope.row.clienttype === 1
                ? "Android"
                : scope.row.clienttype === 2
                ? "IOS"
                : "其他"
            }}
          </div>
        </template>
        <template #packstatus="scope">
          <div v-if="scope.row.packstatus === 0">
            <span style="background: #56A500;" class="status_tag"></span
            ><span>正常</span>
          </div>
          <div v-if="scope.row.packstatus === 1">
            <span style="background: #F7B500;" class="status_tag"></span
            ><span>生成中</span>
          </div>
          <div v-if="scope.row.packstatus === 2">
            <span style="background: #56A500;" class="status_tag"></span
            ><span>生成成功</span>
          </div>
          <div v-if="scope.row.packstatus === 3">
            <span class="status_tag"></span><span>生成失败</span>
          </div>
        </template>
        <template #enablestat="scope">
          <div>
            {{ scope.row.enablestat === 1 ? "启用" : "禁止" }}
          </div>
        </template>
        <template #action="scope">
          <div class="action_column">
            <i
              v-if="scope.row.packstatus === 1 &&　roleType !== '2' && scope.row.createdby.toString() === userid"
              class="iconfont icon-zhongxinshengcheng"
              style="font-size: 18px;color:#979797"
              title="生成"
            ></i>
            <i
              v-if="scope.row.packstatus !== 1  &&　roleType !== '2' && scope.row.createdby.toString() === userid"
              class="iconfont icon-zhongxinshengcheng"
              style="font-size: 18px;"
              @click="agenpacksubpackage(scope.row)"
              title="生成"
            ></i>
            <i
              class="iconfont icon-chakan"
              style="font-size: 18px;"
              @click="previewItem(scope.row)"
              title="查看"
            ></i>
            <i
              v-if="roleType !== '2' && scope.row.createdby.toString()  === userid"
              style="font-size: 18px;"
              class="iconfont icon-bianji"
              @click="editItem(scope.row)"
              title="编辑"
            ></i>
            <el-popconfirm
              v-show="scope.row.enablestat === 1 && roleType !== '2' && scope.row.createdby.toString()  === userid"
              title="确定禁用该子包吗？"
              @onConfirm="confirmDisable(scope.row)"
              :ref="`popover-${scope.$index}`"
            >
              <i
                slot="reference"
                class="iconfont icon-jinyong"
                style="font-size: 18px;"
                title="禁用"
              ></i>
            </el-popconfirm>
            
            <el-popconfirm
              v-show="scope.row.enablestat === 2  && roleType !== '2' && scope.row.createdby.toString()  === userid"
              @onConfirm="confirmEnable(scope.row)"
              title="确定启用该子包吗？"
              :ref="`popover-${scope.$index}`"
            >
              <i
                slot="reference"
                class="iconfont icon-qiyong"
                style="font-size: 18px;"
                title="启用"
              ></i>
            </el-popconfirm>
          </div>
        </template>
        <template #packagecreatedat="scope">
          {{ parseTime(scope.row.createdat, "{y}-{m}-{d} {h}:{i}") }}
        </template>
        <!-- 第三方API -->
        <template #thirdapikey="scope">
          <div>
            <span v-if="scope.row.thirdapikey">是</span>
            <span v-else>否</span>
          </div>
        </template>
        
        <!-- 备注 -->
        <template #remark="scope">
          <div>
            <span v-if="scope.row.remark">{{ scope.row.remark }}</span>
            <span v-else> - </span>
          </div>
        </template>
      </page-table-new>
    </div>
    <img-pre ref="imgPre" />
  </div>
</template>

<script>
/*
 *@author: liujinming
 *@date: 2021-07-23 14:14:29
 *@description: 子包列表模块开发
 */
import pageTableNew from "@com/tableNew";
import { getChildList, setEnabled, getGameGroupList,packsubpackage } from "@/api/child";
import { downFile, copyText, parseTime } from "@/utils";
import { getCookie } from "@/utils/auth";
import ImgPre from "@com/imgPre";

import {
  CHILD_TYPE_OPTIONS,
  CHILD_STATUS_OPTIONS,
  CHILD_TABLE_COLUMNS,
  CHILD_API_OPTIONS,
} from "../const";


export default {
  name:'extensionChild',
  components: { pageTableNew, ImgPre },
  data() {
    return {
      roleType: getCookie("roleType"),
      userid: getCookie("userid"),
      typeOption: CHILD_TYPE_OPTIONS, //类型
      groupsOption: [], //游戏分组
      statusOption: CHILD_STATUS_OPTIONS, //子包状态
      apiOption: CHILD_API_OPTIONS, //第三方api
      childRoleName:'',
      featchData: {
        pageSize: 20,
        pageStart: 1,
        sortBool: true,
        sortType: "modify_time",
        type: 1,
        clientType: "", //类型
        gameGroupId: '', //游戏分组
        statusType: "", //子包状态
        hasThirdApi:"", //是否是第三方API
        dateTime: [], //时间区间
        query: "" //推广商ID/名称
      },
      tableData: [],
      tableColumns: CHILD_TABLE_COLUMNS,
      total: 0
    };
  },
  created() {
    this.getDataList();
    this.childRoleName = this.$store.state.user.childRoleName;
    this.tableColumns.forEach(item=>{
      if(item.key === 'username'){
        item.label = this.childRoleName;
      }
    })
    this.getGameGroupList();
  },
  methods: {
    parseTime,
    //获取分组信息
    getGameGroupList() {
      getGameGroupList().then(res => {
        let arr = [
          {
            id: 'id',
            name: "游戏分组：全部",
            label: "全部"
          }
        ];
        res.data.forEach(x => {
          arr.push({
            id: x.id,
            name: `游戏分组：${x.groupname}`,
            label: x.groupname
          });
        });
        this.groupsOption = arr;
      });
    },
    //下载子包
    download(url) {
      downFile(url);
    },
    copyDown(url) {
      copyText(url, () => {
        this.$message({
          message: "复制成功",
          type: "success"
        });
      });
    },
    //查看二维码
    openImg(url) {
      console.log(url);
      this.$refs.imgPre.openImgPreModal(url);
    },
    //查询数据
    searchData() {
      this.getDataList();
    },
    //重新搜索
    resetData() {
      let obj = {
        pageSize: this.featchData.pageSize,
        pageStart: 1,
        sortBool: true,
        sortType: "modify_time",
        type: 1,
        clientType: "", //类型
        gameGroupId: '', //游戏分组
        statusType: "", //子包状态
        hasThirdApi:"",//是否是第三方API
        dateTime: [], //时间区间
        query: "" //推广商ID/名称
      };
      this.featchData = obj;
      this.getDataList();
    },
    //确认启用
    confirmEnable(item) {
      let params = {
        id: item.id,
        data: 1
      };
      setEnabled(params).then(res => {
        this.getDataList();
      });
    },
    //确认禁用
    confirmDisable(item) {
      console.log(item);
      let params = {
        id: item.id,
        data: 2
      };
      setEnabled(params).then(res => {
        this.getDataList();
      });
    },
    //获取数据
    getDataList() {
      let params = {
        page: this.featchData.pageStart,
        pageSize: this.featchData.pageSize,
        query: this.featchData.query,
        startAt: this.featchData.dateTime[0]
          ? new Date(this.featchData.dateTime[0]).getTime()
          : '',
        endAt: this.featchData.dateTime[1]
          ? new Date(this.featchData.dateTime[1]).getTime()
          : '',
        clientType: this.featchData.clientType,
        gameGroupId:
          this.featchData.gameGroupId == 0
            ? undefined
            : this.featchData.gameGroupId,
        packStatus: this.featchData.statusType,
        hasThirdApi:this.featchData.hasThirdApi,
        // assistantId: 0,
        assistantAgencyId: 0
      };
      getChildList(params).then(res => {
        this.total = res.data.total;
        this.tableData = res.data.values;
      });
    },
    handlePageChange(value) {
      this.featchData.pageSize = value.pageSize;
      this.featchData.pageStart = value.pageStart;
      this.getDataList();
    },
    handleSortChange() {},
    addChild() {
      var view = {
        meta:{
          module: "extensionChilddetail",
          parent: "extension",
          title: "子包",
        },
        fullPath: "/extension/childdetail",
        name: "extensionChilddetail",
        path: "/extension/childdetail"
      }
      this.$store.dispatch('tagsView/delView', view).then(() => {
        this.$router.push({
          path: "/extension/childdetail",
          query: {
            type: "create"
          }
        });
      })
    },
    //跳转编辑详情
    editItem(item) {
      var view = {
        meta:{
          module: "extensionChilddetail",
          parent: "extension",
          title: "子包",
        },
        fullPath: "/extension/childdetail",
        name: "extensionChilddetail",
        path: "/extension/childdetail"
      }
      this.$store.dispatch('tagsView/delView', view).then(() => {
        this.$router.push({
          path: "/extension/childdetail",
          query: {
            type: "edit",
            id: item.id
          }
        });
      })
    },
    //查看子包详情
    previewItem(item) {
      var view = {
        meta:{
          module: "extensionChilddetail",
          parent: "extension",
          title: "子包",
        },
        fullPath: "/extension/childdetail",
        name: "extensionChilddetail",
        path: "/extension/childdetail"
      }
      this.$store.dispatch('tagsView/delView', view).then(() => {
        this.$router.push({
          path: "/extension/childdetail",
          query: {
            type: "detail",
            id: item.id
          }
        });
      })
    },
    agenpacksubpackage(item){
      packsubpackage({id:item.id}).then((res)=>{
        if(res.code === 0){
          this.$message({
            message: "生成中，请稍候......",
            type: "success"
          });
          this.searchData();
        }else{
          this.$message.error({type: res.message});
        }
      })
    }
  }
};
</script>
<style lang="scss">
.qr_popover {
  padding: 0px;
  box-sizing: border-box;
  height: 200px;
  img {
    width: 200px;
  }
  .popper__arrow {
    display: none;
  }
}
</style>
<style lang="scss" scoped>
.child_list {
  .child_list_search {
    .search_box {
      display: inline-block;
      vertical-align: top;
      margin-right: 6px;
      margin-bottom: 16px;
      .reset_btn {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #777777;
        text-align: justify;
        margin-left: 12px;
        cursor: pointer;
      }
    }
  }
  .child_list_table {
    background: #ffffff;
    box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.09);
    border-radius: 4px;
    padding: 16px 16px 0 16px;
    margin: 0 0 16px 0;
    .qr_box {
      position: absolute;
      z-index: 1000;
    }
    .icon-erweima {
      font-size: 22px;
      color: #06367c;
      cursor: pointer;
    }
    .icon-erweima:hover {
      color: #0266cc;
    }
    .status_tag {
      display: inline-block;
      height: 6px;
      width: 6px;
      border-radius: 50%;
      background: #cf0d17;
      margin-right: 6px;
      position: relative;
      top: -2px;
    }
    .red_button {
      margin-left: 4px;
    }
    .table_btn {
      display: inline-block;
      box-sizing: border-box;
      height: 22px;
      line-height: 20px;
      width: 40px;
      text-align: center;
      border-radius: 4px;
      border: 1px solid #06367c;
      color: #06367c;
      cursor: pointer;
    }
    .action_column {
      i {
        color: var(--themeColor);
        margin-right: 8px;
        cursor: pointer;
      }
      i:hover {
        color: #0266cc;
      }
    }
  }
}
</style>
